<template>
	<!-- 弹出申请方式-->
	<uni-popup
		ref="showBottom"
		:safe-area="false"
		type="bottom"
		:mask-click="false"
	>
		<view class="popup_way">
			<view class="text_top_popup">
				选择类型
				<uni-icons
					class="icon"
					color="#aaa"
					@click="closePopup()"
					size="22"
					type="closeempty"
				></uni-icons>
			</view>
			<scroll-view
				scroll-y="true"
				@scrolltolower="scrolltolower"
				class="scroll_y"
			>
				<view class="height_list" v-if="waylist.length > 0">
					<template v-for="(item, index) in waylist" :key="index">
						<uni-list-item
							clickable
							@click="addWorkor(item)"
							v-if="
								![
									fixedModuleId.smallMaintenance,
									fixedModuleId.mediumMaintenance,
									fixedModuleId.bigMaintenance,
								].includes(item.id)
							"
						>
							<template v-slot:body>
								<view class="way_name">
									<span
										:style="{
											color: store.state.wayType.id == item.id ? '#007cff' : '',
										}"
									>
										{{ item.name }}
									</span>
									<uni-icons
										v-if="store.state.wayType.id == item.id"
										color="#007cff"
										type="checkmarkempty"
									></uni-icons>
								</view>
							</template>
						</uni-list-item>
					</template>
				</view>
				<view class="tip_title" v-else>暂无数据</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import {ref, toRefs, watch} from 'vue';
	import store from '@/store_network/index.js';
	import apiOrder from '@/util/network_api/apiOrder.js';
	import {moduleId as fixedModuleId} from '@/config/order';

	let waylist = ref([]);
	const total = ref(0);
	const page = ref(1);
	const showBottom = ref(null); //申请工单弹窗
	// 获取报单模块列表
	const getApplyWay = async (type) => {
		let data = {
			limit: 0,
			name: '',
			page: page.value,
		};
		uni.showLoading({
			title: '加载中...',
		});
		await apiOrder.getOrderModuleList(data, type).then((res) => {
			if (res.code == 20000) {
				waylist.value = [...waylist.value, ...res.data.rows];
				total.value = res.data.total;
			}
		});
		uni.hideLoading();
	};
	const scrolltolower = () => {
		if (total.value > waylist.value.length) {
			page.value = page.value + 1;
			getApplyWay(typeVo.value);
		}
	};
	const props = defineProps({
		//子组件接收父组件传递过来的值
		showpopup: Boolean,
	});
	//使用父组件传递过来的值
	const {showpopup} = toRefs(props);
	const emit = defineEmits(['set-popup', 'value-change']);
	const closePopup = () => {
		showBottom.value.close();
		emit('set-popup', false);
	};
	const openPopup = () => {
		showBottom.value.open();
		emit('set-popup', true);
	};
	watch(showpopup, (n) => {
		if (n) {
			openPopup();
		} else {
			closePopup();
		}
	});
	const addWorkor = (item) => {
		closePopup();
		emit('value-change', item);
	};
	const typeVo = ref();
	const getList = async (type: number) => {
		page.value = 1;
		typeVo.value = type;
		waylist.value = [];
		await getApplyWay(type);
	};
	defineExpose({getList});
</script>

<style scoped lang="scss">
	.popup_way {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;

		.text_top_popup {
			text-align: center;
			font-size: 32rpx;
			padding: 20rpx 0;
			font-weight: bold;

			.icon {
				position: absolute;
				right: 40rpx;
				font-weight: 500;
			}
		}

		.tip_title {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999;
			font-size: 28rpx;
			height: 50%;
		}

		.scroll_y {
			height: 60vh;

			.height_list {
				padding-bottom: 100rpx;

				.way_name {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
				}
			}
		}
	}

	:deep(.uni-popup) {
		z-index: 999;
	}
</style>
